<template>
    <div class="tenant">
        <el-form>
            <el-form-item>
                <el-button type="primary" icon="el-icon-plus" @click="addData">
                    新增
                </el-button>
                <el-dropdown class="dropbtn" v-if="multipleSelection.length">
                    <el-button>批量操作<i class="el-icon-arrow-down el-icon--right"></i></el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="BatchdeleteFn()"><i class="el-icon-delete"></i>删除
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-form-item>
        </el-form>
        <tableList :headerData="headerData" :multipleSelection="multipleSelection" :tableData="tableData" :total="total"
            :num="multipleSelection.length" @SelectionChange="SelectionChange" @CurrentChange="CurrentChange"
            @SizeChange="SizeChange">
            <template v-slot:avatar="{ row }">
                <div>
                    <img :src="row.avatar" alt="" class="headerimg" />
                </div>
            </template>
            <template v-slot:operationBtn="{ operationData }">
                <div>
                    <el-button type="text" @click="tenanteditFn(operationData)">编辑</el-button>
                    <el-divider direction="vertical" style="margin-left: 20px"></el-divider>
                    <el-dropdown>
                        <a class="el-dropdown-link">
                            更多<i class="el-icon-arrow-down el-icon--right"></i>
                        </a>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="moredetailFn(operationData)">详情</el-dropdown-item>

                            <el-dropdown-item>
                                <el-popconfirm title="确定删除?" @onConfirm="tenantdeleteFn(operationData)">
                                    <span slot="reference">删除</span>
                                </el-popconfirm>
                            </el-dropdown-item>
                            <!-- @click.native="tenantdeleteFn(operationData)" -->
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </template>
        </tableList>
        <el-dialog title="租户管理" :visible.sync="dialogFormVisible" :class="[detail ? 'disabled' : '']"
            :before-close="handleClose" v-DragWindow>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
                :disabled="disabled">
                <el-form-item label="租户名称" placeholder="请输入租户名称" :label-width="formLabelWidth" size="small" prop="name">
                    <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="租户编号" :label-width="formLabelWidth" prop="id" size="small">
                    <el-input-number v-model="ruleForm.id" controls-position="right" @change="handleChange" :min="1"
                        class="inputnumber"></el-input-number>
                </el-form-item>
                <el-form-item label="开始时间" :label-width="formLabelWidth" prop="beginDate" size="small">
                    <el-date-picker v-model="ruleForm.beginDate" type="datetime" placeholder="请选择开始时间"
                        :picker-options="pickerOptionsBegin" class="beginDatepicker" format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" :label-width="formLabelWidth" prop="endDate" size="small">
                    <el-date-picker v-model="ruleForm.endDate" type="datetime" placeholder="请选择结束时间"
                        :picker-options="pickerOptionsEnd" class="beginDatepicker" format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth" size="small" prop="state">
                    <el-radio-group v-model="ruleForm.status">
                        <el-radio :label="1">正常</el-radio>
                        <el-radio :label="0">冻结</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">关 闭</el-button>
                <el-button type="primary" @click="submit()" v-if="detail == false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
    
<script>
import tableList from "@/components/part-wwx/tableList.vue";
import {
    tenantlist,
    tenantadd,
    tenantedit,
    tenantdelete,
    tenantdeleteBatch,
} from "@/api/api-wwx/systenant";
export default {
    name: "tenantManagement",
    components: { tableList },
    data() {
        return {
            // 时间限制
            pickerOptionsBegin: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },

            },

            pickerOptionsEnd: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },

            },

            disabled: false,
            ids: "",
            ruleForm: {
                id: "",
                name: "",
                beginDate: "",
                endDate: "",
                status: "",
            },
            rules: {
                id: [
                    {
                        required: true,
                        trigger: "blur",
                    },
                ],
            },
            formLabelWidth: "120px",
            dialogFormVisible: false,
            total: 0,
            pagesize: 10,
            currentpage: 1,
            multipleSelection: [],
            tableData: [],
            headerData: [
                {
                    prop: "name",
                    label: "租户名称",
                    width: "160",
                },
                {
                    prop: "id",
                    label: "租户编号",
                    width: "160",
                },
                {
                    prop: "beginDate",
                    label: "开始时间",
                    width: "160",
                },
                {
                    prop: "endDate",
                    label: "结束时间",
                    width: "160",
                },
                {
                    prop: "status_dictText",
                    label: "状态",
                },
            ],
            state: "",
            detail: false,
        };
    },
    mounted() {
        let _self = this;
        _self.tenantlistFn();
    },
    methods: {
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        //批量删除
        BatchdeleteFn() {
            let _self = this;
            let arrid = [];
            console.log(_self.multipleSelection);
            for (let item of _self.multipleSelection) {
                arrid.push(item.id);
            }

            console.log(arrid.toString());
            let bb = arrid.toString() + ",";
            let data = {
                ids: bb,
            };
            tenantdeleteBatch(data).then((res) => {
                console.log(res);
                if (res.code == 200) {
                    _self.tenantlistFn();
                }
            });
        },
        //删除
        tenantdeleteFn(operationData) {
            let _self = this;
            console.log(operationData);
            let data = {
                id: operationData.id,
            };
            tenantdelete(data).then((res) => {
                if (res.code == 200) {
                    _self.tenantlistFn();
                }
            });
        },
        //详情
        moredetailFn(operationData) {
            let _self = this;
            _self.disabled = true
            _self.detail = true;
            _self.dialogFormVisible = true;
            _self.ruleForm = operationData;
            _self.state = "";
        },
        //新增按钮
        addData() {
            this.disabled = false
            let _self = this;
            _self.detail = false;
            _self.dialogFormVisible = true;
            _self.state = "新增";
        },

        tenanteditFn(operationData) {
            this.disabled = false
            this.state = "编辑";
            let _self = this;
            _self.detail = false;
            //   console.log(operationData);
            _self.dialogFormVisible = true;
            _self.ruleForm = operationData;
        },


        submit() {
            if (this.ruleForm.beginDate > this.ruleForm.endDate) {
                this.$message('开始时间不能大于结束时间')
                console.log(132456);
            } else {
                let _self = this;
                let begin = _self.ruleForm.beginDate
                let end = _self.ruleForm.endDate
                let data = {
                    beginDate: _self.ruleForm.beginDate,
                    endDate: _self.ruleForm.endDate,
                    id: _self.ruleForm.id,
                    name: _self.ruleForm.name.trim(),
                    status: _self.ruleForm.status,
                };
                if (_self.state == "新增") {
                    tenantadd(data).then((res) => {
                        //   console.log(res);
                        if (res.code == 200) {
                            _self.dialogFormVisible = false;
                            _self.ruleForm = {
                                id: "",
                                name: "",
                                beginDate: "",
                                endDate: "",
                                status: "",
                            };
                            _self.tenantlistFn();
                            _self.$message('新增成功')
                        } else {
                            return _self.$message(res.message);
                        }
                    });
                } else {
                    tenantedit(data).then((res) => {
                        //   console.log(res);
                        if (res.code == 200) {
                            _self.dialogFormVisible = false;
                            _self.ruleForm = {
                                id: "",
                                name: "",
                                beginDate: "",
                                endDate: "",
                                status: "",
                            };
                            _self.tenantlistFn();
                            // _self.$message('编辑')
                        } else {
                            return _self.$message(res.message);
                        }
                    });
                }
            }

        },
        handleChange(value) {
            // console.log(value);
        },
        tenantlistFn() {
            let _self = this;
            let data = {
                pageNo: _self.currentpage,
                pageSize: _self.pagesize,
            };
            tenantlist(data).then((res) => {
                console.log(res);
                if (res.code == 0) {
                    let { current, size, total } = res.result;
                    (_self.total = total),
                        (_self.pagesize = size),
                        (_self.currentpage = current);
                    _self.tableData = []
                    for (let item of res.result.records) {

                        item.beginDate = String(item.beginDate)
                        console.log(item.beginDate);
                        item.endDate = String(item.endDate)
                        if (item.beginDate == 'null') {
                            item.beginDate = ' '
                        }
                        if (item.endDate == 'null') {
                            item.endDate = ' '
                        }
                        let begin = (item.beginDate).split(" ")
                        let end = (item.endDate).split(" ")
                        _self.tableData.push({
                            beginDate: begin[0],
                            createBy: item.createBy,
                            createTime: item.createTime,
                            endDate: end[0],
                            id: item.id,
                            name: item.name,
                            status: item.status,
                            status_dictText: item.status_dictText

                        })
                    }

                }
            });
        },
        CurrentChange(val) {
            let _self = this;
            _self.currentpage = val;
            _self.tenantlistFn();
        },
        SizeChange(val) {
            let _self = this;
            _self.pagesize = val;
            _self.tenantlistFn();
        },
        SelectionChange(val) {
            let _self = this;
            _self.multipleSelection = val;
            // _self.userList();
        },
    },
};
</script>
    
<style>
.tenant .el-date-editor.beginDatepicker {
    width: 100%;
}

.tenant .disabled {
    cursor: not-allowed;
}

.tenant .dropbtn {
    margin-left: 20px
}
</style>